<template>
    <div class="file" :style="{ width: width, height: width }">
        <div class="file-img" v-if="isImg" @click="handleImagePreview">
            <img :src="imgUrl" />
            <img-preview ref="imgPreview" />
        </div>
        <div class="file-other" v-else @click="handleTargetFileUrl">
            <div class="file-icon" :style="{ width: `calc(${width} * 0.5)`, height: `calc(${width} * 0.5)` }">
                <img :src="docIcon" v-if="isDoc" />
                <img :src="pptIcon" v-if="isPPT" />
                <img :src="xlsIcon" v-if="isXls" />
                <img :src="pdfIcon" v-if="isPdf" />
                <img :src="mp3Icon" v-if="isAudio" />
                <img :src="mp4Icon" v-if="isMov" />
                <img :src="zipIcon" v-if="isZip" />
                <img :src="unknowIcon" v-if="isUnknow" />
            </div>
            <video-preview ref="videoPreview" />
        </div>
    </div>
</template>
<script>
import imgPreview from "./imgPreview.vue";
import videoPreview from "./videoPreview.vue";

export default {
    name: "UploadFileItem",
    components: { imgPreview, videoPreview },
    props: {
        file: {
            type: Object,
            default: {},
        },
        width: {
            type: String,
            default: "178px",
        },
    },
    computed: {
        isImg() {
            const imgExt = ["jpg", "jpeg", "png", "gif", "bmp"];
            if (imgExt.includes(this.file.attachtype)) {
                return true;
            }
            return false;
        },
        isDoc() {
            const fileExt = ["doc", "docx"];
            if (fileExt.includes(this.file.attachtype)) {
                return true;
            }
            return false;
        },
        isXls() {
            const fileExt = ["xls", "xlsx", "csv"];
            if (fileExt.includes(this.file.attachtype)) {
                return true;
            }
            return false;
        },
        isPPT() {
            const fileExt = ["ppt", "pptx"];
            if (fileExt.includes(this.file.attachtype)) {
                return true;
            }
            return false;
        },
        isPdf() {
            const fileExt = ["pdf"];
            if (fileExt.includes(this.file.attachtype)) {
                return true;
            }
            return false;
        },
        isMov() {
            const fileExt = ["mp4", "mov"];
            if (fileExt.includes(this.file.attachtype)) {
                return true;
            }
            return false;
        },
        isAudio() {
            const fileExt = ["mp3"];
            if (fileExt.includes(this.file.attachtype)) {
                return true;
            }
            return false;
        },
        isZip() {
            const fileExt = ["zip", "rar"];
            if (fileExt.includes(this.file.attachtype)) {
                return true;
            }
            return false;
        },
        isUnknow() {
            const fileExt = ["zip", "rar", "mp3", "mp4", "mov", "pdf", "ppt", "pptx", "xls", "xlsx", "csv", "doc", "docx", "jpg", "jpeg", "png", "gif", "bmp"];
            if (!fileExt.includes(this.file.attachtype)) {
                return true;
            }
            return false;
        },
        imgUrl() {
            return this.file.attachUrl;
        },
    },
    data() {
        return {
            docIcon: require("@/assets/icons/docx.png"),
            pptIcon: require("@/assets/icons/ppt.png"),
            xlsIcon: require("@/assets/icons/xlsx.png"),
            pdfIcon: require("@/assets/icons/PDF.png"),
            mp3Icon: require("@/assets/icons/mp3.png"),
            mp4Icon: require("@/assets/icons/mp4.png"),
            zipIcon: require("@/assets/icons/zip.png"),
            unknowIcon: require("@/assets/icons/unknowfile.png"),
        };
    },
    methods: {
        handleImagePreview() {
            this.$refs.imgPreview.showImg(this.imgUrl, this.file.attachwidth, this.file.attachheight);
        },
        handleTargetFileUrl() {
            if (this.isMov) {
                this.$refs.videoPreview.showVideo(this.imgUrl);
            } else {
                window.open(this.imgUrl);
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.file {
    overflow: hidden;

    &:hover {
        cursor: pointer;
    }

    .file-img {
        height: inherit;
        position: relative;

        img {
            width: inherit;
            height: inherit;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .file-other {
        height: inherit;
        display: flex;
        justify-content: center;
        align-items: center;

        .file-icon {
            background-color: white;
            border-radius: 10px;

            img {
                width: inherit;
                height: inherit;
            }
        }
    }
}
</style>
